import indexController from '../controllers/'

import movieController from '../controllers/positions'
import cinemaController from '../controllers/cinema'
import profileController from '../controllers/profile'
import cityController from '../controllers/city'
import searchController from '../controllers/search'

class Router{
    constructor(){
        this.render()
    }

    render(){
        window.addEventListener('load',this.handlePageload.bind(this))
        window.addEventListener('hashchange',this.handlePageload.bind(this))
    }

    setActiveClass(hash){
        $(`footer li[data-to=${hash}]`).addClass('active').siblings().removeClass('active')
    }

    renderDOM(hash){
        
        let pageConterllors = {
            movieController,
            cinemaController,
            profileController,
            cityController,
            searchController
        }

        pageConterllors[hash + 'Controller'].render()
    }

    handlePageload(){
        let hash = location.hash.substr(1) || 'movie'
        
        indexController.render()
        location.hash = hash

        this.renderDOM(hash)
        this.setActiveClass(hash)
    }

    handleHashchange(e){
        let hash = location.hash.substr(1)

        this.renderDOM(hash)
        this.setActiveClass(hash)
    }
}

new Router()